<template>
  <a-layout v-if="typesss!==null" class="components-layout-demo-custom-trigger" style="height: 100%;">
    <!--    <a-layout>-->
    <a-layout-header  class="layout-side width-100-per" :style="{ position: 'fixed', zIndex: 1, width: '100%', minWidth:'1000px' }">
      <div class="logos"></div>
      <div class="layout-right-center margin-right-10-px" style="">
        <nip-menu :isIcon='true' style="margin-right: 10px"/>
        <a-popover placement="bottomRight">
          <template slot="content">
            <p class="cursor-pointer" @click="showDrawer">
              <a>个人资料
                <a-drawer
                  title="个人资料"
                  placement="right"
                  :closable="false"
                  @close="onClose"
                  :visible="visible"
                  width="400px"
                >
                  <div class="padding-10-px layout-center-top">
                    <a-avatar icon="user" :size="108" :src="userData.userImg" /><br/>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">姓名</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.name"/>
                    </div>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">学号</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.code"/>
                    </div>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">身份证号</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.idCard"/>
                    </div>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">身份类别</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.userType"/>
                    </div>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">性别</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.gender"/>
                    </div>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">用户类别</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.armyType"/>
                    </div>
                    <div class="layout-center margin-top-20">
                      <span class="FormSpan">联系方式</span>
                      <a-input :disabled="disabled" class="formInput" v-model="userData.phone"/>
                    </div>
                    <template v-if="updatePassword">
                      <div class="layout-center margin-top-20">
                        <span class="FormSpan">原密码</span>
                        <a-input class="formInput" v-model="passwordOld" type="password"/>
                      </div>
                      <div class="layout-center margin-top-20">
                        <span class="FormSpan">新密码</span>
                        <a-input class="formInput" v-model="passwordNew01" type="password"/>
                      </div>
                      <div class="layout-center margin-top-20">
                        <span class="FormSpan">确认密码</span>
                        <a-input class="formInput" v-model="passwordNew02" type="password"/>
                      </div>
                    </template>
                  </div>
                  <div :style="{position: 'absolute',left: 0,bottom: 0,width: '100%',borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',}">
                    <a-button v-if="!updatePassword" icon="form"  @click="updateP" type="primary">修改密码</a-button>
                    <a-button v-if="updatePassword" icon="close" :style="{marginRight: '8px'}" @click="onUpdateClose">取消</a-button>
                    <a-button v-if="updatePassword" icon="check" @click="onUpdateOk" type="primary">确认</a-button>
                  </div>
                </a-drawer>
              </a>
            </p>
            <a class="cursor-pointer" @click="exitLogin">退出登录</a>
          </template>
          <a-avatar size="small" :src="userData.userImg" icon="user"/>
        </a-popover>
      </div>
    </a-layout-header>
    <div class="width-100-per layout-left-top">
      <nip-breadcrumb :style="{marginTop: '64px'}"/>
    </div>
    <a-layout-content class="height-100-per width-100-per"
                      style="min-height: 300px;"
                      :style="{ margin: '0 0px 5px', padding: '0 10px 5px', overflowY:'auto' }">
      <transition name="slide-fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </a-layout-content>
    <a-layout-footer class="layout-side width-100-per"
                     :style="{padding: '5px 10px',fontSize: '12px',fontWeight: 'bold'}">
      <div>
        <a-icon type="clock-circle" style="margin-right: 5px"/>
        {{nowTime}}
      </div>
      <div>****版权所有 版本1.0</div>
    </a-layout-footer>
  </a-layout>
</template>

<script>
  import moment from 'moment'
  import {Layout,Icon,Popover,Avatar,Drawer,Input,Modal} from "ant-design-vue"
  import NipMenu from '../components/NipMenu';
  import NipBreadcrumb from '../components/NipBreadcrumb';

  const userTypeData=[
    {key:0,title:'学生',id:'0'},
    {key:1,title:'教师',id:'1'},
    {key:2,title:'员工',id:'2'}
  ]
  const armyTypeData=[
    {key:0,title:'普通用户',id:'0'},
    {key:1,title:'修理工',id:'1'},
    {key:2,title:'管理员',id:'2'}
  ]
  export default {
    name: 'index',
    components: {
      NipBreadcrumb,
      NipMenu,
      AInput:Input,
      ADrawer:Drawer,
      AIcon:Icon,
      APopover:Popover,
      AAvatar:Avatar,
      ALayout: Layout,
      ALayoutHeader: Layout.Header,
      ALayoutSider: Layout.Sider,
      ALayoutContent: Layout.Content,
      ALayoutFooter: Layout.Footer,
    },
    data(){
      return{
        passwordOld:'',
        passwordNew01:'',
        passwordNew02:'',
        userTypeData,
        armyTypeData,
        disabled:true,
        userIDs:'',
        userData:{
          name:'',
          code:'',
          idCard:'',
          phone:'',
          userImg:'',
          armyType:'',
          gender:'',
          userType:'',
          password:'',
          remark:'',
          userParentId:'',
        },
        userTypeInt:0,
        armyTypeInt:0,
        genderInt:0,
        oldPasswors:"",
        updatePassword:false,
        visible:false,
        nowTime:moment().format("YYYY-MM-DD / hh:mm:ss / a"),
        typesss:null,
        setInterval:null
      }
    },
    created(){
      let hh = JSON.parse(this.$store.getters.currentUser)
      console.log('***',hh)
    },
    mounted(){
      const that=this;
      //存储页面高度
      that.$store.commit('clientHeight');
      that.$store.commit('clientWidth');
      let resizeTag = true;
      window.onresize= () =>{
        if(resizeTag){
          that.$store.commit('clientHeight');
          that.$store.commit('clientWidth');
          resizeTag = false;
          setTimeout(()=>{
            resizeTag = true;
          },100)
        }
      }
      this.typesss=JSON.parse(this.$store.getters.currentUser);
      this.userIDs = JSON.parse(this.$store.getters.currentUser).id;
      this.onViewClick(this.userIDs);
      this.showTimes();
    },
    destroyed(){
      clearInterval(this.setInterval);
    },
    methods:{
      showTimes(){
        this.setInterval = setInterval(()=>{
          this.nowTime = moment().format("YYYY-MM-DD / hh:mm:ss / a");
        },1000)
      },
      //初始加载用户数据
      onViewClick(id) {
        const that = this;
        // that.footers = null;
        // that.disabled = true;
        that.userModalTitle = '人员详情';
        that.$apollo.query({
          query:require('../graphql/army/query/findUserById.gql'),
          variables:{id:id},
          fetchPolicy:'no-cache'
        }).then((data)=>{
          const findUserById = data.data.findUserById;
          let userTypes=null;
          let armyTypes = null;
          for(let i in userTypeData){
            if(findUserById.userType == userTypeData[i].key){
              userTypes = userTypeData[i].title;
            }
          }
          for(let j in armyTypeData){
            if(findUserById.armyType == armyTypeData[j].key){
              armyTypes = armyTypeData[j].title;
            }
          }
          that.userData={
            name:findUserById.name,
            armyType:armyTypes,
            code:findUserById.code,
            gender:findUserById.gender===0?"男":"女",
            idCard:findUserById.idCard,
            phone:findUserById.phone,
            userImg:findUserById.userImg,
            userType:userTypes,
            remark:findUserById.remark,
            userParentId:findUserById.userParentId,
            password:findUserById.password,
          };
          that.userTypeInt = findUserById.userType;
          that.armyTypeInt = findUserById.armyType;
          that.genderInt = findUserById.gender;
          that.oldPasswors=findUserById.password;
          // that.values = findUserById.userParentId;
          that.modalPersonnel = true;
        }).catch((error)=>{
          console.log(error)
        })
      },
      //推出登录
      exitLogin(){
        const that = this;
        const confirm = Modal.confirm;
        confirm({
          title:'确定退出登录吗？',
          content:'退出登录后将注销用户信息！',
          onOk(){
            that.routerSkip('/');
            window.localStorage.removeItem('msgs');
          },
          onCancel(){
          }
        })
      },
      showDrawer() {
        this.visible = true;
        this.onViewClick(this.userIDs);
      },
      onClose() {
        this.visible = false;
      },
      onUpdateClose() {
        this.updatePassword = false;
        this.passwordNew01='';
        this.passwordNew02='';
        this.passwordOld = '';
      },
      onUpdateOk(){
        const that=this;
        if(that.passwordOld === '' || that.passwordOld === null ||that.passwordOld === undefined){
          that.$message.error('请输入旧密码！');
          return;
        }
        if(that.passwordNew01 === '' || that.passwordNew01 === null ||that.passwordNew01 === undefined){
          that.$message.error('请输入新密码！');
          return;
        }
        if(that.passwordNew02 === '' || that.passwordNew02 === null ||that.passwordNew02 === undefined){
          that.$message.error('请确认新密码！');
          return;
        }
        if(that.passwordOld !== that.oldPasswors){
          that.$message.error('旧密码不正确，请重新输入！');
          return;
        }
        if(that.passwordNew01 !== that.passwordNew02){
          that.$message.error('两次新密码不一致，请重新输入！');
          return;
        }
        const upData = [];
        upData.push({
          id:that.userIDs,
          name:that.userData.name,
          armyType:that.armyTypeInt,
          code:that.userData.code,
          gender:that.genderInt,
          idCard:that.userData.idCard,
          password:that.passwordNew01,
          phone:that.userData.phone,
          userImg:that.userData.userImg,
          remark:that.userData.remark,
          userType:that.userTypeInt,
          userParentId:that.userData.userParentId,
        })
        console.log(upData[0])
        that.$apollo.mutate({
          mutation:require('../graphql/army/mutation/saveUserPassword.gql'),
          variables:{entity:upData[0]},
        }).then((data)=>{
          that.$message.success("密码修改成功！");
          that.onUpdateClose();
        }).catch(error=>{
          console.log(error);
        })
      },
      updateP(){
        this.updatePassword = true;
      }
    }
  }
</script>
<style scoped>
  .color-black{
    color: black;
  }
  #components-layout-demo-custom-trigger .ant-layout-header {
    padding: 0 25px;
  }

  #components-layout-demo-custom-trigger .logo {
    width: 180px;
    height: 44px;
    background: rgba(255, 255, 255, .2);
    margin: 10px 0 10px 0;
    float: left;
  }

  .ant-menu-item {
    padding: 0 10px !important;
  }
  .logos{
    width: 180px;
    height: 44px;
    background: rgba(255, 255, 255, .2);
    margin: 10px 0 10px 0;
    float: left;
  }
  .FormSpan{
    width: 80px;
    text-align: right;
    margin-right: 10px;
  }
  .margin-top-20{
    margin-top: 20px;
  }
</style>
